import React, { useState } from 'react';
import { convertX, convertY, convertSize } from '../utils/responsive';
import '../css/chart-selector.css';
import TempChart from './TempChart';
import type { EChartsOption } from 'echarts';

export interface ChartData {
  xAxisData: string[];
  evaporationData: number[];
  precipitationData: number[];
  temperatureData: number[];
}

// 下拉选项类型定义
export interface SelectOption {
  value: string;
  label: string;
}

export interface ChartSelectorProps {
  /** 下拉选项数据 */
  options: SelectOption[];
  /** 初始选中值 */
  defaultValue?: string;
  /** 图表数据源 */
  chartData: ChartData;
  /** 选中值变化回调 */
  onChange?: (value: string) => void;
}

/**
 * 图表选择器组件
 * 包含两个功能区块：
 * 1. 下拉选项区域 - 坐标: x=22, y=506, 尺寸: w=360, h=59
 * 2. 图表展示区域 - 坐标: x=0, y=591, 尺寸: w=405, h=139
 * 使用响应式坐标转换函数实现多设备适配
 */
const ChartSelector: React.FC<ChartSelectorProps> = ({ options, defaultValue, chartData, onChange }) => {
  // 将chartData转换为ECharts配置项
  const chartOption: EChartsOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        saveAsImage: { show: true }
      }
    },
    xAxis: [
      {
        type: 'category',
        data: chartData.xAxisData,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: 'pcs',
        min: 0,
        max:function(value) {
          return value.max + 0.1 * value.max; // 将最大值增加10%
        },
        interval: 50,
        axisLabel: {
          formatter: '{value}'
        },
        splitLine: {    
          show: false 
        }
      },
      {
        type: 'value',
        name: 'CR',
        min: 0,
        max: 35,
        interval: 0.2,
        axisLabel: {
          formatter: '{value} '
        },
        splitLine: {    
          show: false 
        }
      }
    ],
    series: [
      {
        name: 'Aims',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' pcs';
          }
        },
        barGap: '0%',
        data: chartData.evaporationData
      },
      {
        name: 'Done',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' pcs';
          }
        },
        data: chartData.precipitationData
      },
      {
        name: 'CompleteRate',
        type: 'line',
        symbol:'none', 
        smooth:true,
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' %';
          }
        },
        data: chartData.temperatureData
      }
    ]
  };

  const [selectedValue, setSelectedValue] = useState(defaultValue || options[0]?.value);

  return (
    <div className="chart-selector" style={{
      position: 'absolute',
      left: convertX(0),
      top: convertY(450),
      width: convertSize(455),
      height: convertSize(739, false),
      zIndex: 20,
    }}>
      {/* 下拉选项区域 - 使用响应式坐标转换 */}
      <div className="chart-selector__dropdown-container" style={{
        position: 'absolute',
      left: convertX(32),
      top: convertY(0),
      width: convertSize(300),
      height: convertSize(59, false),
      }}>
        <select
          className="chart-selector__dropdown"
          value={selectedValue}
          onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
            setSelectedValue(e.target.value);
            if (onChange) onChange(e.target.value);
          }}
        >
          {options.map(option => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>

      {/* 图表区域 - 使用响应式坐标转换 */}
      <div className="chart-selector__chart-container" style={{
        position: 'absolute',
        left: convertX(0),
        top: convertY(0),
        width: convertSize(360),
        height: convertSize(700, false),
      }}>
        <TempChart option={chartOption} />
      </div>
    </div>
  );
};

export default ChartSelector;